<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        4.元素的显示与隐藏

        类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!
        
        本质:让一个元素在页面中隐藏或者显示出来。

        4.1 display属性

        display属性用于设置一个元素应如何显示。
        display: none ;隐藏对象
        display:block ;除了转换为块级元素之外，同时还有显示元素的意思
        
        display隐藏元素后，不再占有原来的位置。
        后面应用及其广泛，搭配JS可以做很多的网页特效。


        4.2 visibility可见性

        visibility属性用于指定一个元素应可见还是隐藏。
        
        visibility : visible;元素可视
        visibility : hidden;元素隐藏

        visibility隐藏元素后，继续占有原来的位置。

        如果隐藏元素想要原来位置，就用visibility : hidden
        如果隐藏元素不想要原来位置，就用display : none(用处更多重点)



        4.3 overflow溢出

        overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

        属性值        描述
        visible      不剪切内容也不添加滚动条
        hidden       不显示超过对象尺寸的内容，超出的部分隐藏掉
        scroll       不管超出内容否，总是显示滚动条
        auto         超出自动显示滚动条，不超出不显示滚动条

        一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflowhidden因为它会隐藏多余的部分。

     -->
</body>
</html>